<template>
	<view class="plr-16 flex sort">
		<view  class="flex pa-6 font-size-10 flex-center br-16 font-color-minor bg-color-white border-color-999"  @click="targetShow">
			{{current.series_name && handleLang(current.series_name)}}
			<u-icon :class='{up:show}' class='ml-8' name="arrow-down" size="12" color="#999"></u-icon>
		</view>
		<view class="sort-item mt-10 bg-color-white border-color-999 ml-4" :style="{height: height}" v-show="show">
			<view class=" pb-16 plr-16" >
				<view class="font-size-10 pt-16 flex flex-ai-center" @click="change(item)"
					:class="item.series_id==where.series_id? 'font-color-textPrimary':'font-color-placeholder'" v-for="item in list"
					:key="item.series_id">
					{{item.series_name && handleLang(item.series_name )}}
					<w-icon v-if="item.series_id==where.series_id" name="checked1" class='ml-4' size="20"></w-icon>					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		props: {
			where:{
				type:Object,
				default(){
					return {
						series_id:0,
					}
				}
			}
		},
		data() {
			return {
				show: false,
				height: '',
				baseList:[
					{
						series_id:0,
						series_name:"全部盲盒"
					}
				]
			}
		},
		computed: {
			...mapState('goods',['boxSeries']),
			list(){
				return  this.baseList.concat( this.boxSeries) 
			},
			current() {
				return this.list.find(v=>v.series_id==this.where.series_id)
			}
		},

		mounted() {

		},
		methods: {
			targetShow() {
				this.show = !this.show
				if (this.show) {
					this.$nextTick(() => {
						this.getHeight();
					})
				}
				this.$emit('show', this.show)
			},
			change(item) {
				this.$emit('change',{
					key:'series_id',
					value:item.series_id
				});
				this.show=false;
			},
			getHeight() {
				let _this = this;
				uni.createSelectorQuery().in(this).select(".sort-item").boundingClientRect(({
					top
				}) => {
					uni.getSystemInfo({
						success({
							windowHeight
						}) {
							// _this.height = (windowHeight - top) + 'px'
							
						}
					})
				}).exec()
			}
		},

	}
</script>

<style lang="scss">
	.sort {
		position: relative;

		.sort-item {
			box-sizing: border-box;
			width: auto;
			left: 0;
			top: 50rpx;
			z-index: 2;
			position: absolute;
			// background-color: #eee;
		}
	}

	.up {
		transform: rotate(180deg);
	}
</style>
